layui.use(['table','jquery'], function () {
    var table = layui.table;
    var $ = layui.jquery;
    var form=layui.form;
        
    table.render({
        elem: '#test',
        url: './getMenu',
        toolbar: '#toolbarDemo',
        title: '菜单管理表',
        cols:[ [
            {
                type: 'checkbox',
                fixed: 'left'
            }, {
                field: 'm_id',
                title: 'ID',
                width: 80,
                fixed: 'left',
                unresize: true,
            }, {
                field: 'm_name',
                title: '菜单名称',
                width: 120,
                edit: 'text'
            }, {
                field: 'm_url',
                title: '菜单路径',
                width: 150,
                edit: 'text',
                templet: function (res) {
                    return '<em>' + res.m_url + '</em>'
                }
            }, {
                field: 'm_num',
                title: '菜单编号',
                width: 150,
                edit: 'text',
                
            }, {
                field: 'm_parent',
                title: '父级菜单',
                width: 150,
                edit: 'text'
            }, {
                field: 'm_status',
                title: '菜单状态',
                width: 85,
                templet: '#switchTpl',
                unresize: true
            }, {
                field: 'm_icon',
                title: '菜单图标',
                width: 150,
                edit: 'text'
                
            }, {
                field: 'm_order',
                title: '菜单序号',
                width: 150,
                edit: 'text'
            }, {
                fixed: 'right',
                title: '操作',
                toolbar: '#barDemo',
                width: 150
            }]
        ],
        page: true,
        id: 'testReload'
    });
var active = {
    reload: function () {
        var demoReload = $('#demoReload');

        //执行重载
        table.reload('testReload', {
            page: {
                curr: 1 //重新从第 1 页开始
            },
            where: {
                key: {
                    id: demoReload.val()
                }
            }
        });
    }
};
$('.demoTable .layui-btn').on('click', function () {
    // var type = $(this).data('type');
    // active[type] ? active[type].call(this) : '';
    // console.log(type);
    
    table.render({
        elem: '#test',
        url: './getMenuById?mid=' + $("#demoReload").val(),
    
        toolbar: '#toolbarDemo',
        title: '菜单管理表',
        cols: [
            [{
                type: 'checkbox',
                fixed: 'left'
            }, {
                field: 'm_id',
                title: 'ID',
                width: 80,
                fixed: 'left',
                unresize: true,
            }, {
                field: 'm_name',
                title: '菜单名称',
                width: 120,
                edit: 'text'
            }, {
                field: 'm_url',
                title: '菜单路径',
                width: 150,
                edit: 'text',
                templet: function (res) {
                    return '<em>' + res.m_url + '</em>'
                }
            }, {
                field: 'm_num',
                title: '菜单编号',
                width: 150,
                edit: 'text',

            }, {
                field: 'm_parent',
                title: '父级菜单',
                width: 150,
                edit: 'text'
            }, {
                field: 'm_status',
                title: '菜单状态',
                width: 85,
                templet: '#switchTpl',
                unresize: true
            }, {
                field: 'm_icon',
                title: '菜单图标',
                width: 150,
                edit: 'text'

            }, {
                field: 'm_order',
                title: '菜单序号',
                width: 150,
                edit: 'text'
            }, {
                fixed: 'right',
                title: '操作',
                toolbar: '#barDemo',
                width: 150
            }]
        ],
        page: true,
        id: 'testReload'
    });
});
    //头工具栏事件
    table.on('toolbar(test)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
            case 'getCheckData':
                //var data = checkStatus.data;
                //layer.alert(JSON.stringify(data));
                layer.open({
                    type: 2,
                    title: '新增菜单',
                    shadeClose: true,
                    shade: 0.8,
                    maxmin: true,
                    area: ['600px', '90%'],
                    content: './addMenu' //iframe的url
                });
                break;
        };
    });

    //监听行删除事件
    table.on('tool(test)', function (obj) {
        var data = obj.data;
        console.log(obj)
        if (obj.event === 'del') {
            layer.confirm('真的删除行么', function (index) {
                $.ajax({
                    url: "./delByMenuId",
                    data: {
                        mid: data.m_id
                    },
                    type:"post"
                }).then(function(res){
                    if(res.status==1){
                         obj.del();
                        layer.close(index);
                    }
                })
            });
        } 
    });
    //监听单元格编辑
    table.on('edit(test)', function (obj) {
        var value = obj.value; //得到修改后的值
         
        $.ajax({
            url: "./updateByMenuId",
            type:"post",
            data:obj.data,

        }).then((res)=>{
            if(res.status==1){
                layer.alert(res.msg, {
                    skin: 'layui-layer-molv' //样式类名
                        ,
                    closeBtn: 0
                });
            }else{
                layer.alert(res.msg, {
                    skin: 'layui-layer-lan',
                    closeBtn: 0,
                    anim: 4 //动画类型
                });
            }
        })
    });



    //监听菜单状态
    form.on('switch(status)', function (obj) {
       //console.log(this);
       let status=obj.elem.checked==true?1:0;
        $.ajax({
            url:"./updateStatus",
            type:"post",
            data:{mid:this.value,status:status}
        }).then(function(res){
            if(res.status==1){
                layer.tips(res.msg, obj.othis, {
                    tips: [1, '#9e4242'],
                    time: 4000
                });
            }else{
                layer.tips(res.msg);
            }
        })
       // layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.this);
    });
});